<template>
    <div class="content">
        <!--头部-->
        <div class="header-setting">
            <a-breadcrumb class="breadcrumb">
                <a-breadcrumb-item>
                    <a href="../main">首页</a>
                </a-breadcrumb-item>
                <a-breadcrumb-item>运营服务</a-breadcrumb-item>
                <a-breadcrumb-item>白名单管理</a-breadcrumb-item>
            </a-breadcrumb>
            <div class="box-condition-item">
                <div style="margin: 0 50px">停车点</div>
                <template>
                    <a-select style="margin: 0 100px 0 16px; width: 200px"
                              showSearch
                              placeholder="选择停车点"
                              optionFilterProp="children"
                              v-model="selectParksName"
                              @change="selectParkChange"
                              :allowClear="true"
                    >
                        <a-select-option v-for="p in parksName" :key="p.id" :value="p.parkName">{{p.parkName}}
                        </a-select-option>
                    </a-select>
                </template>
                <template>
                    <div style="margin: 0 40px">名单类型</div>
                    <a-select style="margin: 0 50px 0 0px; width: 200px"
                              showSearch
                              placeholder="名单类型"
                              optionFilterProp="children"
                              @select="selectType"
                              :allowClear="true"
                    >
                        <a-select-option v-for="p in this.type" :key="p.id" :value="p.name">{{p.name}}
                        </a-select-option>
                    </a-select>
                </template>
                <template>
                    <div style="margin: 0 40px">是否生效</div>
                    <a-select style="margin: 0 50px 0 0px; width: 200px"
                              showSearch
                              placeholder="是否生效"
                              optionFilterProp="children"
                              @select="selectValid"
                              :allowClear="true"
                    >
                        <a-select-option v-for="p in this.valid" :key="p.id" :value="p.name">{{p.name}}
                        </a-select-option>
                    </a-select>
                </template>
            </div>
            <div class="box-condition-item">
                <template>
                    <div style="margin: 0 40px">车牌</div>
                    <a-input style="margin: 0 40px 0 0px;width: 200px" v-model="licencePlate"
                             @change="plateSearch" placeholder="车牌"/>
                </template>
                <template>
                    <div style="margin: 0 50px">时间设置</div>
                    <template>
                        <div class="button_time">
                            <a-button type="primary" @click="button_time(0)" :style="computedStyle(0)">今天</a-button>
                            <a-button type="primary" @click="button_time(1)" :style="computedStyle(1)">昨天</a-button>
                            <a-button type="primary" @click="button_time(2)" :style="computedStyle(2)">本周</a-button>
                            <a-button type="primary" @click="button_time(3)" :style="computedStyle(3)">上周</a-button>
                            <a-button type="primary" @click="button_time(4)" :style="computedStyle(4)">本月</a-button>
                        </div>
                    </template>
                    <template>
                        <div style="margin: auto 50px">
                            <a-range-picker
                                    :showTime="{ format: 'HH:mm' }"
                                    format="YYYY-MM-DD HH:mm"
                                    :placeholder="['开始时间', '结束时间']"
                                    @ok="onOk"
                                    @change="onChange"
                                    :value="rangePicker()"
                            />
                        </div>
                    </template>
                </template>
            </div>
        </div>
        <div class="box-form">
            <!--工具栏-->
            <div class="box-tool">
                <div></div>
                <div style="display: flex">
                    <a-button type="primary" @click="addClick" icon="plus">添加</a-button>
                    <div style="width: 20px;"/>
                    <a-popconfirm
                        title="确认删除？" okText="确认" cancelText="取消"
                        @confirm="deleteClick" placement="leftTop">
                        <a-button type="danger" icon="delete">移除</a-button>
                    </a-popconfirm>
                </div>
            </div>
            <!--数据表格-->
            <div class="box-table">
                <a-table rowKey="id"
                         :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange,columnWidth:'3.5%'}"
                         :columns="columns"
                         :dataSource="dataSource"
                         :pagination="pagination"
                         bordered size="small"
                         :scroll="scroll"
                         :customRow="blackcustomRow"
                         :rowClassName="setRowClassName"
                         @change="queryPageData"
                />

            </div>
            <!--修改白名单-->
            <a-modal title="修改白名单" v-model="this.correctPopupData.visible" :width="400"
                     @ok="editClick" @cancel="hideAddPages">
                <div class="viewItem">
                        <template>
                            <div class="itemText">名单类型</div>
                            <a-select style="margin: 0 50px 0 0px; width: 200px"
                                      showSearch
                                      placeholder="名单类型"
                                      optionFilterProp="children"
                                      @select="editselectType"
                                      :allowClear="true"
                            >
                                <a-select-option v-for="p in this.type" :key="p.id" :value="p.name">{{p.name}}
                                </a-select-option>
                            </a-select>
                        </template>
                    </div>
                <div class="viewItem">
                        <template>
                            <div class="itemText">停车点</div>
                            <a-select style="margin: 0 50px 0 0px; width: 200px"
                                      showSearch
                                      mode="multiple"
                                      placeholder="选择停车点"
                                      optionFilterProp="children"
                                      v-model="correctPopupData.parksNameList"
                                      @change="selectParkChange"
                                      :allowClear="true"
                            >
                                <a-select-option v-for="p in parksName" :key="p.id" :value="p.parkName">{{p.parkName}}
                                </a-select-option>
                            </a-select>
                        </template>
                    </div>
                <div class="viewItem">
                        <div  class="itemText">是否生效</div>
                        <template>
                            <a-select style="margin: 0 50px 0 0px; width: 200px"
                                      showSearch
                                      placeholder="是否生效"
                                      optionFilterProp="children"
                                      @select="editSelectValid"
                                      :allowClear="true"
                            >
                                <a-select-option v-for="p in this.valid" :key="p.id" :value="p.name" >{{p.name}}
                                </a-select-option>
                            </a-select>
                        </template>
                    </div>
                <div class="viewItem">
                        <div class="itemText">时间设置</div>
                        <template>
                            <div style="margin: 0 50px 0 0px; width: 200px">
                                <a-range-picker
                                        :showTime="{ format: 'HH:mm' }"
                                        format="YYYY-MM-DD HH:mm"
                                        :placeholder="['开始时间', '结束时间']"
                                        @ok="onOk2"
                                        @change="onChange2"
                                        :value="rangePicker2()"
                                />
                            </div>
                        </template>
                    </div>
                <div class="viewItem">
                        <div class="itemText">车牌号</div>
                        <div style="margin: 0 50px 0 0px; width: 200px">
                            <a-input placeholder="车牌号" v-model="correctPopupData.licencePlate"/>
                        </div>
                    </div>
                <div class="viewItem">
                        <div class="itemText">备注</div>
                        <div style="margin: 0 50px 0 0px; width: 200px">
                            <a-textarea placeholder="备注" v-model="correctPopupData.note"/>
                        </div>
                    </div>
            </a-modal>
        </div>
    </div>
</template>

<script>
    import AddPagesUtils from "../../utils/AddPagesUtils";
    import Constant from "../../utils/Constant";
    import WhiteListManagerApi from "../../api/operate/WhiteListManager"
    import moment from "moment";
    import CommonApi from "../../api/CommonApi";
    import EquipmentApi from "../../api/equipment/EquipmentManage";
    const columns = [
        {
            title: "车牌号"
            , dataIndex: "licencePlate"
            , width: '10%'
        },
        {
            title: "名单类型"
            , dataIndex: "typeStatus"
            , width: '10%'
        },
        {
            title: "适用车场"
            , dataIndex: "parksName"
            , width: '10%'
        },
        {
            title: "生效时间"
            , dataIndex: "startTime"
            , width: '10%'
        },
        {
            title: "到期时间"
            , dataIndex: "endTime"
            , width: '10%'
        },
        {
            title: "创建时间"
            , dataIndex: "createdTime"
            , width: '10%'
        },
        {
            title: "状态"
            , dataIndex: "validStatus"
            , width: '10%'
        },
        {
            title: "备注"
            , dataIndex: "note"
            , width: '10%'
        }
    ];
    const dataSource = [];
    const queryCondition = {
        size: 10,
        page: 1,
        licencePlate: '',
        parksName:[],
        startTime: '',
        endTime: '',
        isValid:0,
        listType:0,
        timeScreenCondition: 6,
    };
    const addCondition = {
        licencePlate: '',
        parksName:[],
        startTime: '',
        endTime: '',
        isValid:0,
        listType:0,
    };
    const removeCondition = {
        id: 0,
    };

    export default {
        name: "BlacklistManager",

        /*数据层*/
        data() {
            return {
                /* 表单选择 */
                selectedRowKeys: [],            /* 选择key */
                type:[{id:0,name:'白名单'},{id:1,name:'黑名单'}],
                valid:[{id: 0, name:'已生效'},{id: 1, name:'未生效'}],
                listType:0,
                isValid: 0,
                parksName:[],
                selectParksName:[],
                licencePlate:'',
                selectId: -1,
                momentArr: [],
                columns: columns,
                dataSource,
                /*分页插件*/
                pagination: {
                    showTotal: total => `共${total}条`,
                    total: 0,   // set get
                    defaultCurrent: 1,
                    showQuickJumper: true,
                    defaultPageSize: 10
                },
                /*表格固定头部*/
                scroll: {
                    y: 550,
                },
                tableState: {
                    rowId: -1,
                },
                queryCondition,
                addCondition,
                removeCondition,
                /* 修正弹窗 */
                correctPopupData: {
                    visible: false,
                    id: "",
                    licencePlate: '',
                    parksNameList: [],
                    startTime: '',
                    endTime: '',
                    isValid: 0,
                    listType: 0,
                    note: '',
                    parksName:[],
                    momentArr: [],
                },

            }
        },
        /*方法层*/
        methods: {
            deleteClick() {
                let selectArray = this.getSelectArray();
                if(selectArray.length == 0) {
                    this.$message.error("请至少选中一个");
                    return ;
                }else {
                    let value = JSON.stringify(selectArray.map(item => {
                        return item.id
                    }))
                    let v1= {"ids":value};
                    WhiteListManagerApi.removeBlock(v1).then(() => {
                        this.$message.success("删除成功！");
                        this.queryData();
                    }).catch(error => {
                        console.log("删除白名单异常！", error);
                    })
                }
            },
            /* ---------------- 选中处理 ------------------- */
            getSelectArray() {
                let dataSource = this.dataSource || [];
                let selectedRowKeys = this.selectedRowKeys;
                return dataSource.filter(item => {
                    return selectedRowKeys.filter(id => id == item.id).length > 0;
                })
            },
            onSelectChange(selectedRowKeys) {
                this.selectedRowKeys = selectedRowKeys;
            },
            initParkList() {
                CommonApi.getParkList()
                    .then((data) => {
                        this.parksName = data.data;
                    })
                    .catch(err => {
                        console.log("error:", err);
                    });
            },
            /*时间按钮控制*/
            button_time(e) {
                this.selectId = e;
                let momentStart;
                let momentEnd;
                switch (e) {
                    case 0:
                        momentStart = moment().startOf('day');
                        momentEnd = moment().endOf('day');
                        break;
                    case 1:
                        momentStart = moment().add('day', -1).startOf('day');
                        momentEnd = moment().add('day', -1).endOf('day');
                        break;
                    case 2:
                        momentStart = moment().week(moment().week()).startOf('week');
                        momentEnd = moment().week(moment().week()).endOf('week');
                        break;

                    case 3:
                        momentStart = moment().week(moment().week() - 1).startOf('week');
                        momentEnd = moment().week(moment().week() - 1).endOf('week');
                        break;
                    case 4:
                        momentStart = moment().month(moment().month()).startOf('month');
                        momentEnd = moment().month(moment().month()).endOf('month');
                        break;
                    default :
                        break;
                }
                this.momentArr[0] = momentStart;
                this.momentArr[1] = momentEnd;
                this.queryData();
            },
            /*日期选择*/
            onChange(date) {
                this.selectId = -1;
                this.momentArr = date;
            },
            onOk() {
                this.selectId = -1;
                this.queryData();
            },
            rangePicker() {
                return this.correctPopupData.momentArr;
            },
            onChange2(date) {
                this.correctPopupData.selectId = -1;
                this.correctPopupData.momentArr = date;
            },
            onOk2() {
                this.correctPopupData.selectId = -1;
                this.queryData();
            },
            rangePicker2() {
                return this.correctPopupData.momentArr;
            },
            selectType(value){
                if(value==='白名单'){
                    this.listType = 0;
                }else{
                    this.listType = 1;
                }
                this.queryData();
            },
            editselectType(value){
                if(value==='白名单'){
                    this.correctPopupData.listType = 0;
                }else{
                    this.correctPopupData.listType = 1;
                }
            },
            selectParkChange() {
                this.queryData();
            },
            selectValid(value){
                if(value==='已生效'){
                    this.isValid = 0;
                }else{
                    this.isValid = 1;
                }
                this.queryData();
            },
            editSelectValid(value){
                if(value==='已生效'){
                    this.correctPopupData.isValid = 0;
                }else{
                    this.correctPopupData.isValid = 1;
                }
            },
            /*表格*/
            blackcustomRow(record) {
                return {
                    on: { // 事件
                        dblclick: () => {
                            this.showCorrectionPopup(record);
                        }
                    },
                }
            },
            showCorrectionPopup(item) {
                this.correctPopupData.visible = true;
                this.correctPopupData.id = item.id;
                this.correctPopupData.licencePlate = item.licencePlate;
                this.correctPopupData.parksNameList = item.parksNameList;
                this.correctPopupData.startTime = item.startTime;
                this.correctPopupData.endTime = item.endTime;
                this.correctPopupData.note = item.note;
            },
            setRowClassName(record) {
                return record.id === this.tableState.rowId ? 'clickRowStyl' : '';
            },

            addClick() {
                AddPagesUtils.showAddPages(Constant.viewType.WHITELIST_ADD, null, this.confirmAdd);
            },
            confirmAdd(data) {
                if (data == undefined) {
                    return;
                }
                let addCondition1 = this.addCondition;
                addCondition1.licencePlate = data.licencePlate;
                addCondition1.parksNameList = data.parksNameList;
                addCondition1.startTime = data.startTime;
                addCondition1.endTime = data.endTime;
                addCondition1.isValid = data.isValid;
                addCondition1.listType = data.listType;
                addCondition1.note = data.note;
                WhiteListManagerApi.addBlock(addCondition1).then(() => {
                    this.queryData();
                }).catch(error => {
                    console.log("添加白名单异常！", error);
                });
            },

            plateSearch() { this.queryData(); },
            timestampToTime(timestamp) {
                var date = new Date(timestamp);
                var Y = date.getFullYear() + '-';
                var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1):date.getMonth()+1) + '-';
                var D = (date.getDate()< 10 ? '0'+date.getDate():date.getDate())+ ' ';
                var h = (date.getHours() < 10 ? '0'+date.getHours():date.getHours())+ ':';
                var m = (date.getMinutes() < 10 ? '0'+date.getMinutes():date.getMinutes()) + ':';
                var s = date.getSeconds() < 10 ? '0'+date.getSeconds():date.getSeconds();
                return Y+M+D+h+m+s;
            },
            editClick(){
                let beginMoment = this.correctPopupData.momentArr[0];
                let endMoment = this.correctPopupData.momentArr[1];
                if (beginMoment != undefined && endMoment != undefined) {
                    this.correctPopupData.startTime = new Date(beginMoment).getTime();
                    this.correctPopupData.endTime = new Date(endMoment).getTime();
                    this.correctPopupData.timeScreenCondition = 6;
                } else {
                    this.correctPopupData.timeScreenCondition = 0;
                }
                this.correctPopupData.startTime = this.timestampToTime(this.correctPopupData.startTime);
                this.correctPopupData.endTime = this.timestampToTime(this.correctPopupData.endTime);
                let licencePlate = this.correctPopupData.licencePlate;
                let isValid = this.correctPopupData.isValid;
                let startTime = this.correctPopupData.startTime;
                let endTime = this.correctPopupData.endTime;
                let parksNameList = this.correctPopupData.parksNameList;
                let listType = this.correctPopupData.listType;
                if (licencePlate === undefined || licencePlate === '') {
                    return this.$message.warn("车牌号不能为空！");
                }
                if (isValid === undefined || isValid === '' ) {
                    return this.$message.warn("是否有效不能为空！");
                }
                if (startTime === undefined || endTime === undefined || startTime === '' || endTime === '' ) {
                    return this.$message.warn("时间不能为空！");
                }
                if (parksNameList === undefined || parksNameList === '') {
                    return this.$message.warn("停车点不能为空！");
                }
                if (listType === undefined || listType === '') {
                    return this.$message.warn("名单类型不能为空！");
                }
                WhiteListManagerApi.editBlock(this.correctPopupData).then(() => {
                    this.queryData();
                }).catch(error => {
                    console.log("修改白名单异常！", error);
                });
                this.hideAddPages();
            },
            /*隐藏遮罩层*/
            hideAddPages() {
                this.correctPopupData.visible = false;
                this.correctPopupData.id = '';
                this.correctPopupData.licencePlate = '';
                this.correctPopupData.parksNameList = [];
                this.correctPopupData.startTime = '';
                this.correctPopupData.endTime = '';
                this.correctPopupData.isValid = 0;
                this.correctPopupData.listType = 0;
                this.queryData();
            },
            /*查询数据*/
            queryPageData(page) { this.queryData(page.current); },

            queryData(pageNum) {
                /* 清空 */
                this.tableState.rowId = -1;
                /* param */
                let queryCondition1 = this.queryCondition;
                let beginMoment = this.momentArr[0];
                let endMoment = this.momentArr[1];
                if (beginMoment != undefined && endMoment != undefined) {
                    queryCondition1.startTime = new Date(beginMoment).getTime() / 1000;
                    queryCondition1.endTime = new Date(endMoment).getTime() / 1000;
                    queryCondition1.timeScreenCondition = 6;
                } else {
                    queryCondition1.timeScreenCondition = 0;
                }
                queryCondition1.licencePlate = this.licencePlate;
                queryCondition1.parksName = this.selectParksName||[];
                queryCondition1.isValid = this.isValid;
                queryCondition1.listType = this.listType;
                queryCondition1.page = pageNum || 1;
                WhiteListManagerApi.getList(queryCondition1).then((data) => {
                    this.dataSource = data.data.list;
                    this.pagination.total = data.data.total;
                }).catch(error => console.log("获取白名单列表异常！", error));

            },

        },
        /*计算层*/
        computed: {
            computedStyle() {
                return function (selectId) {
                    return this.selectId == selectId ? "" : "";
                }
            }
        },
        /*渲染层*/
        mounted() {
            // this.button_time(0);
            this.queryData();
            this.initParkList();
        },
    }
</script>

<style>
    /*表格行选中背景颜色*/
    .clickRowStyl {
        background-color: #C1E0FD;
    }
    .content {
        width: 100%;
        height: 100%;
    }

    .header-setting {
        width: 100%;
        height: 174px;
        background: #fff;
    }

    .header-setting .breadcrumb {
        margin-left: 41px;
        padding-top: 15px;
    }


    .box-condition-item {
        display: flex;
        align-items: center;
        min-width: 1500px;
        margin-top: 5px;
        margin-bottom: 5px;
        padding: 5px 0;
    }

    .box-condition-item .box-item {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 5px 5px 20px 5px;
    }

    .button_time button {
        margin-left: 10px;
    }

    /* 表单 */
    .box-form {
        padding-left: 40px;
        padding-right: 40px;
        min-height: 705px;
        background: #fff;
        margin-top: 8px;
    }

    .box-form .box-tool {
        padding-top: 11px;
        margin: 8px 0;
        width: 100%;
        /* flex */
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
</style>
